<template>
  <!-- 我的等级 -->
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class='member-center'>
			<view class='header'>
				<swiper class="swiper" :current="swiperIndex" previous-margin="55rpx" next-margin="55rpx"
					@change="swiperChange" active-class="on">
					<block v-for="(item, index) in VipList" :key="index">
						<swiper-item>
							<view class="swiper-item" :class="{on: swiperIndex == index}"
								:style="{'background-image': 'url('+item.thumb+')'}">
								<view class="acea-row row-middle user-wrap">
									<image class="image" :src="userInfo.avatar"></image>
									<view class="text">
										<view class="name">{{userInfo.nickname}}</view>
										<view v-if="item.discount_money>0">租车可优惠<text class="num">{{item.discount_money}}</text>元</view>
										<view v-else>租车可享单价<text class="num">{{item.discount_rate}}</text>折</view>
									</view>
									<view class="state" v-if="item.is_action===1">已解锁</view>
									<view class="state" v-else>未达成
									</view>
								</view>
								<template v-if="item.is_action===1">
									<!-- 支付升级 -->
									<block v-if="item.auto_upgrade==2">
										<view class="grow-wrap">
											<view>等级金额：￥<text class="num">{{item.upgrade_number}}</text></view>
										</view>
										<view class="acea-row row-between-wrapper record-wrap" hover-class="none">
											<view>您的会员于 {{levelInfo.level_expir_date}} 到期</view>
										</view>
									</block>
									<!-- 手动升级 -->
									<block v-if="item.auto_upgrade==0">
										<view class="grow-wrap">
										</view>
										<view class="acea-row row-between-wrapper record-wrap" hover-class="none">
											<view>当前等级可以享有对应的会员特权</view>
											<view class="iconfont icon-jiantou"></view>
										</view>
									</block>
									<!-- 自动升级 -->
									<block v-if="item.auto_upgrade==1">
										<view class="grow-wrap">
											<view>当前消费值<text class="num">{{levelInfo.cur_number}}</text>点</view>
											<view class="process">
												<view :style="{width: `${Math.floor((levelInfo.cur_number / item.upgrade_number) > 1 ? 100 : levelInfo.cur_number / item.upgrade_number * 100)}%`}" class="fill" v-if="levelInfo.cur_number<levelInfo.upgrade_number"></view>
											</view>
											<view class="ratio"><text class="num">{{levelInfo.cur_number}}</text>/<text class="num">{{item.upgrade_number}}</text></view>
										</view>
										<view class="acea-row row-between-wrapper record-wrap" hover-class="none">
											<view>租车消费越多，提升等级越快</view>
											<view class="iconfont icon-jiantou"></view>
										</view>
									</block>
								</template>
								<template v-else>
									<!-- 支付升级 -->
									<block v-if="item.auto_upgrade==2">
										<view class="grow-wrap">
											<view class='lock' style="margin-top: 70rpx;">
												<text class='iconfont icon-quanxianguanlisuozi'></text>暂未解锁该等级</view>
											<view class="ratio">
												<text class="num">支付金额：￥<text>{{item.upgrade_number}}</text></text>
											</view>
											<view class="ratio">
												<text class="num">有效期：{{item.expire_label}}</text>
											</view>
										</view>
									</block>
									<!-- 手动升级 -->
									<block v-if="item.auto_upgrade==1">
										<view class="grow-wrap">
											<view class='lock' style="margin-top: 70rpx;">
												<text class='iconfont icon-quanxianguanlisuozi'></text>暂未解锁该等级</view>
											<view class="acea-row row-between-wrapper record-wrap" style="padding-left: 0;">
												<view>您还没解锁，加油~！</view>
												<view class="iconfont icon-jiantou"></view>
											</view>
										</view>
									</block>
									<!-- 自动升级 -->
									<block v-if="item.auto_upgrade==0">
										<view class="grow-wrap">
											<view class='lock'>
												<text class='iconfont icon-quanxianguanlisuozi'></text>暂未解锁该等级</view>
											<view class="process">
												<view :style="{width: `${Math.floor(levelInfo.cur_number / item.upgrade_number * 100)}%`}" class="fill"></view>
											</view>
											<view class="ratio">
												<text class="num">当前<text>{{levelInfo.cur_number}}</text>点，需达到<text>{{item.upgrade_number}}</text>点解锁</text>
											</view>
											<navigator class="acea-row row-between-wrapper record-wrap" style="padding-left: 0;"
												url="/pages/users/user_vip_areer/index" hover-class="none">
												<view>您还没解锁，加油~！</view>
												<view class="iconfont icon-jiantou"></view>
											</navigator>
										</view>
									</block>
								</template>
								<view class="level">{{item.name}}</view>
								<!-- <view v-if="item.grade < levelInfo.grade" class="pass">已解锁更高等级</view> -->
								<!-- <view v-if="!levelInfo.grade || item.grade > levelInfo.grade" class='lock'><text class='iconfont icon-quanxianguanlisuozi'></text>暂未解锁该等级</view> -->
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="right-section">
					<block v-for="(item, index) in VipList" :key="index">
						<block v-if="item.show_buy==1">
							<view class="buy-level-button" v-if="swiperIndex == index" @click="payLevel">
								<button class="my-but-primary">{{item.buy_text}}</button>
							</view>
						</block>
					</block>
					
					<view class="section-hd acea-row row-between-wrapper">
						<view>会员特权</view>
						<navigator class="svip" url="/pages/annex/vip_paid/index" v-if="is_open_member">升级SVIP</navigator>
					</view>
					<view class="section-bd acea-row">
						<view class="item">
							<image class="image" src="../static/vip05.png"></image>
							<view class="">租车折扣</view>
						</view>
						<view class="item">
							<image class="image" src="../static/vip01.png"></image>
							<view class="">专属徽章</view>
						</view>
						<view class="item">
							<image class="image" src="../static/vip03.png"></image>
							<view class="">经验累积</view>
						</view>
						<view class="item">
							<image class="image" src="../static/vip04.png"></image>
							<view class="">尊享客服</view>
						</view>
					</view>
				</view>
				
				<view class="skill-section">
					<my-tabs :list="tabs" :lineColor="$s.theme" itemStyle="height:80rpx;width:340rpx;" lineWidth="100" @click="setCurrent"></my-tabs>
					
					<view class="parse-content" v-if="tab_current===0">
						<u-parse :content="memo" :lazyLoad="true" loadingImg="/static/images/img-loading.gif"></u-parse>
					</view>
					
					<view class="coupon-box" v-if="tab_current===1">
						<mars-coupon type="list" :list="coupon_data" :butShow="coupon_ok"></mars-coupon>
					</view>
				</view>
				
			</view>	
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import checkLogin from '@/mixins/loginCheck.js'
	import $pay from '@/common/pay.js'
	export default {
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'会员等级',
				VipList: [],
				// indicatorDots: false,
				// circular: true,
				// autoplay: false,
				// interval: 3000,
				// duration: 500,
				swiperIndex: 0,
				levelInfo: {},
				coupon_data: {},
				memo:'',
				coupon_ok: false,
				is_buy_button:false,
				buy_text:'购买会员',
				tabs:[
					{
						name:"会员权益",
					},
					{
						name:"会员优惠券",
					},
				],
				tab_current:0,				//0等于会员权益,1等于优惠券
			};
		},
		watch: {
			VipList: function() {
				let that = this;
				if (that.VipList.length > 0) {
					that.VipList.forEach(function(item, index) {
						if (item.is_clear === false) {
							// that.swiper.slideTo(index);
							that.activeIndex = index;
							that.grade = item.grade;
						}
					});
				}
			},
		},
		computed:{
			...mapState({
				userInfo:state => state.$userInfo,
			}),
		},
		onLoad() {
			this.getlevelInfo()
		},
		onShow() {

		},
		methods: {
			getlevelInfo: function() {
				let than=this;
				uni.$u.api.userLevel().then(res=>{
					const{
						info,
						list
					}=res.data;
					than.levelInfo = info;
					than.VipList = list;
					than.levelInfo.exp = parseFloat(than.levelInfo.exp);
					than.levelInfo.rate = Math.floor(than.levelInfo.exp / than.levelInfo.exp_num * 100);
					if (than.levelInfo.rate > 100) {
						than.levelInfo.rate = 100;
					}
					const index = list.findIndex(({
						grade
					}) => grade === info.grade);
					if (index !== -1) {
						than.swiperIndex = index;
						this.level_id = than.VipList[index].id || 0;
						than.coupon_data = than.VipList[index].coupon_list.list || [];
						than.memo = than.VipList[index].memo || '';
						than.coupon_ok = than.VipList[index].grade === than.levelInfo.grade ? true : false;
					}
				})	
			},
			onLoadFun(){
				this.getlevelInfo();
			},
			/**
			 * 会员切换
			 * 
			 */
			swiperChange(e) {
				let index = e.detail.current;
				let now_vip = this.VipList[index];		//现在选中的VIP
				this.swiperIndex = index;
				this.level_id = now_vip.id || 0;
				this.coupon_data = now_vip.coupon_list.list;
				this.memo = now_vip.memo;
				this.coupon_ok = now_vip.grade === this.levelInfo.grade ? true : false;
				// this.grade = now_vip.grade
				// this.getTask();
			},
			//支付升级
			payLevel(){
				let than=this
				uni.$u.api.createLevelOrder({level_id:this.level_id}).then(res=>{
					// #ifdef MP-WEIXIN
					let paytype='wxpay';
					// #endif
					// #ifdef MP-ALIPAY
					let paytype='alipay';
					// #endif
					uni.$u.api.levelOrderPay({id:res.data.id,pay_type:paytype}).then(respay=>{
						$pay.orderPay('to'+paytype,respay.data).then(res=>{
							than.$c.success('支付成功！');
							than.getlevelInfo();
						})
					})
				})
			},
			// 切换选显卡
			setCurrent(e){
				this.tab_current=e.index;
			}
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/crmeb.scss";
	page{
		background-color: $u-bg-color;
	}
	.swiper {
		.swiper-item {
			height: 330rpx;
			border-radius: 10rpx;
			background: center/100% 100% no-repeat;
			transform: scale(0.9);
			transition: all 0.2s ease-in 0s;
			line-height: 1.1;

			&.on {
				transform: none;
			}
		}

		.user-wrap {
			padding-top: 20rpx;
			padding-left: 22rpx;
			line-height: 1.1;

			.image {
				width: 90rpx;
				height: 90rpx;
				border: 6rpx solid rgba(245, 245, 245, 0.3);
				border-radius: 50%;
			}

			.text {
				flex: 1;
				min-width: 0;
				margin-right: 14rpx;
				margin-left: 14rpx;
				font-size: 22rpx;
				color: #666666;

				.num {
					margin-right: 10rpx;
					margin-left: 10rpx;
					font-size: 30rpx;
					font-style: italic;
				}
			}

			.name {
				margin-bottom: 9rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-weight: bold;
				font-size: 30rpx;
				color: #282828;
			}

			.state {
				align-self: flex-start;
				height: 36rpx;
				padding-right: 12rpx;
				padding-left: 18rpx;
				border-top-left-radius: 18rpx;
				border-bottom-left-radius: 18rpx;
				background-color: #484848;
				overflow: hidden;
				font-size: 20rpx;
				line-height: 36rpx;
				color: #FFFFFF;
			}
		}

		.grow-wrap {
			padding-left: 24rpx;
			margin-top: 37rpx;
			font-size: 22rpx;
			color: #282828;

			.num {
				margin-right: 8rpx;
				margin-left: 8rpx;
				font-size: 32rpx;
			}

			.process {
				width: 300rpx;
				height: 6rpx;
				border-radius: 3rpx;
				margin-top: 22rpx;
				background-color: rgba(0, 0, 0, 0.2);
			}

			.fill {
				width: 50%;
				height: 100%;
				border-radius: 3rpx;
				background-color: #333333;
			}

			.ratio {
				margin-top: 15rpx;
				font-size: 24rpx;

				.num {
					margin-right: 0;
					margin-left: 0;
					font-size: 24rpx;

					text {
						margin-right: 8rpx;
						margin-left: 8rpx;

						&:first-child {
							font-size: 32rpx;
						}
					}
				}
			}
		}

		.record-wrap {
			margin-top: 30rpx;
			padding-right: 22rpx;
			padding-left: 24rpx;
			font-size: 22rpx;
			color: #282828;

			.iconfont {
				font-size: 22rpx;
			}
		}

		.pass {
			display: inline-block;
			width: 292rpx;
			height: 56rpx;
			margin-top: 80rpx;
			margin-left: 42rpx;
			background: url("") center/100% 100% no-repeat;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 56rpx;
			text-align: center;
			color: #282828;
		}

		.lock {
			font-weight: bold;
			font-size: 30rpx;
			color: #282828;

			.iconfont {
				margin-right: 17rpx;
				font-size: 30rpx;
				vertical-align: middle;
			}
		}

		.level {
			position: absolute;
			top: 195rpx;
			left: 440rpx;
			width: 132rpx;
			height: 44rpx;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 44rpx;
			text-align: center;
			color: #E1E6ED;
			// #ifdef MP-ALIPAY
				font-size: 24rpx;
				left: auto;
				right: 50rpx;
			// #endif
		}
	}

	.right-section {
		border-radius: 20rpx;
		margin: 28rpx 30rpx 0;
		background-color: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.1); 

		.section-hd {
			padding: 25rpx 25rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #282828;
		}

		.svip {
			height: 40rpx;
			padding-right: 37rpx;
			padding-left: 19rpx;
			border-radius: 20rpx;
			background: #333333 url("") calc(100% - 13rpx) center/19rpx 22rpx no-repeat;
			font-size: 24rpx;
			line-height: 40rpx;
			text-align: center;
			color: #FFDEB2;
		}

		.section-bd {
			.item {
				flex: 0 0 25%;
				padding-top: 38rpx;
				padding-bottom: 38rpx;
				font-size: 26rpx;
				line-height: 1;
				text-align: center;
				color: #282828;

				.image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					margin: 0 auto 19rpx;
					background: linear-gradient(0deg, #E9BB6D 0%, #F2C880 100%);
					font-size: 48rpx;
					line-height: 90rpx;
				}
			}
		}
	}

	.skill-section {
		margin: 30rpx;
		background-color: #FFF;
		border-radius: 20rpx;
		box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.1); 

		.section-hd {
			padding-top: 38rpx;
			padding-bottom: 32rpx;
			padding-left: 54rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #282828;
		}

		.section-bd {
			padding-right: 30rpx;
			padding-left: 30rpx;

			.item {
				height: 140rpx;
				padding-right: 25rpx;
				padding-left: 25rpx;
				border-radius: 4rpx;
				background-color: #FFFFFF;
				box-shadow: 0 5rpx 10rpx 0 rgba(235, 235, 235, 0.5);

				~.item {
					margin-top: 20rpx;
				}
			}

			.text {
				flex: 1;
			}

			.title {
				padding-left: 19rpx;
				border-left: 5rpx solid #E8B869;
				font-weight: bold;
				font-size: 30rpx;
				line-height: 1.1;
				color: #282828;

				.mark {
					margin-left: 20rpx;
					font-weight: normal;
					font-size: 24rpx;
					color: #C6985C;
				}
			}

			.info {
				padding-left: 19rpx;
				margin-top: 18rpx;
				font-size: 22rpx;
				color: #999999;
			}

			.link {
				width: 140rpx;
				height: 50rpx;
				border-radius: 25rpx;
				background: linear-gradient(-90deg, #E7B667 0%, #FFEAB5 100%);
				font-size: 26rpx;
				line-height: 50rpx;
				text-align: center;
				color: #8A5F1E;
			}
		}
	}

	.member-center .header {
		background: url("") center top/100% 100% no-repeat;
		height: 600rpx;
		padding-top: 37rpx;
	}

	.member-center .header swiper {
		position: relative;
		height: 330rpx;
	}

	.member-center .header swiper-item .memberBg.active {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.member-center .header swiper-item .memberBg.quiet {
		transform: scale(0.9);
		transition: all 0.2s ease-in 0s;
	}

	.member-center .header swiper-item .memberBg {
		width: 100%;
		height: 328rpx;
		border-radius: 16rpx;
		color: #fff;
		position: relative;
		background-size: 100% 100%
	}

	.member-center .header swiper-item .memberBg image {
		width: 89rpx;
		height: 108rpx;
		display: block;
		position: absolute;
		right: 60rpx;
	}

	.member-center .header swiper-item .memberBg .name {
		font-size: 46rpx;
		font-weight: bold;
		padding: 40rpx 0 0 35rpx;
	}

	.member-center .header swiper-item .memberBg .gather {
		padding-left: 86rpx;
		font-size: 22rpx;
		line-height: 40rpx;
	}

	.member-center .header swiper-item .memberBg .gather .strong {
		font-size: 30rpx;
	}

	.member-center .header swiper-item .memberBg .ungather {
		padding-left: 40rpx;
		font-size: 22rpx;
		line-height: 55rpx;
	}

	.member-center .header swiper-item .memberBg .discount {
		font-size: 28rpx;
		font-weight: bold;
		margin: 15rpx 0 0 35rpx;
	}

	.member-center .header swiper-item .memberBg .discount .iconfont {
		margin-left: 10rpx;
		font-size: 30rpx;
	}

	.member-center .header swiper-item .memberBg .nav {
		margin-top: 36rpx;
	}

	.member-center .header swiper-item .memberBg .nav .item {
		flex: 1;
		text-align: center;
		color: rgba(255, 255, 255, 0.6);
		position: relative;
	}

	.member-center .header swiper-item .memberBg .nav .item .num {
		font-size: 40rpx;
		color: #fff;
		font-family: 'Guildford Pro';
	}

	.member-center .header swiper-item .memberBg .nav .item~.item::before {
		position: absolute;
		width: 2rpx;
		height: 32rpx;
		background-color: rgba(255, 255, 255, 0.6);
		content: '';
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.member-center .header swiper-item .memberBg .lock {
		font-size: 26rpx;
		margin: 73rpx 0 0 35rpx;
	}

	.member-center .header swiper-item .memberBg .lock .iconfont {
		font-size: 37rpx;
		margin-right: 15rpx;
		vertical-align: -4rpx;
	}

	.member-center .wrapper {
		background-color: #fff;
		padding-bottom: 16rpx;
		margin-bottom: 20rpx;
	}

	.member-center .wrapper .title {
		height: 98rpx;
		padding: 0 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #282828;
	}

	.member-center .wrapper .title .iconfont {
		color: #ffae06;
		font-weight: normal;
		font-size: 40rpx;
		margin-right: 12rpx;
		vertical-align: -2rpx;
	}

	.member-center .wrapper .title .num {
		font-size: 28rpx;
		color: #999;
	}

	.member-center .wrapper .title .num .current {
		color: #ffae06;
	}

	.member-center .wrapper .list .item {
		width: 690rpx;
		height: 184rpx;
		background-color: #f9f9f9;
		margin: 0 auto 20rpx auto;
		padding: 27rpx 0 22rpx 0;
		border-radius: 12rpx;
		box-sizing: border-box;
	}

	.member-center .wrapper .list .item .top {
		padding-right: 27rpx;
		font-size: 26rpx;
		color: #999;
	}

	.member-center .wrapper .list .item .top .name {
		border-left: 6rpx solid #ffae06;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #282828;
		font-weight: bold;
	}

	.member-center .wrapper .list .item .top .name .iconfont {
		color: #999;
		font-size: 30rpx;
		vertical-align: -2rpx;
		margin-left: 10rpx;
	}

	.member-center .wrapper .list .item .cu-progress {
		overflow: hidden;
		height: 12rpx;
		background-color: #eee;
		width: 636rpx;
		border-radius: 20rpx;
		margin: 35rpx auto 0 auto;
	}

	.member-center .wrapper .list .item .cu-progress .bg-red {
		width: 0;
		height: 100%;
		transition: width 0.6s ease;
		background-color: #ffaa29;
		border-radius: 20rpx;
	}

	.member-center .wrapper .list .item .experience {
		margin-top: 17rpx;
		padding: 0 27rpx;
		font-size: 24rpx;
		color: #999;
	}

	.member-center .wrapper .list .item .experience .num {
		color: #ffad07;
	}
	.buy-level-button{
		padding: 30rpx;
	}
	.buy-level-button .my-but-primary{
		height: 66rpx;
		line-height: 66rpx;
	}
	.parse-content{
		padding:30rpx;
	}
	.coupon-box{
		padding:30rpx 0rpx;
		margin-bottom: 30rpx;
	}
</style>
